<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ZBank_Z-PLUS成长值计算器</title>
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/style.css">
  <script>
    var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?70fc0e5890107d0535c4234c89cbb526";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
    })();
 </script>
  <style>
    #app {
      width: 1000px;
      display: flex;
      justify-content: center;
    }

    .record {
      color: #909399;
      padding: 0.7em 1.7em;
      font-size: 15px;
      border-radius: 0.5em;
      background: #fff;
      border: 1px solid #e8e8e8;
      transition: all .3s;
      box-shadow: 6px 6px 12px #c5c5c5,
        -6px -6px 12px #ffffff;
    }

    .record:active {
      color: #666;
      box-shadow: inset 4px 4px 12px #c5c5c5,
        inset -4px -4px 12px #ffffff;
    }
    .aggregate{
      margin-top: 10px;
      color: #909399;
      display: flex;
      font-weight: 600;
      align-items: center;
      justify-content: center;
    }
    .el-collapse-item__header,.el-collapse-item__content{
      padding-left: 10px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="block">
      <div>
        <el-input placeholder="预计存入本金(单位：万)" v-model=" basics " style="width: 200px;" @change="inputChange">
        </el-input>
        <el-date-picker :disabled="!basics" style="width: 550px;margin-bottom: 40px; margin-top: 10px;" v-model="value1"
          type="daterange" align="right" unlink-panels format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" @change="getDate" :picker-options="pickerOptions">
        </el-date-picker>

        <el-input placeholder="预计总成长值" v-model="sum" :disabled="true" style="width: 225px;">
        </el-input>
      </div>

      <el-tabs type="border-card">
        <el-tab-pane label="当前计算">
          <el-table :data="value2" style="width: 950px" max-height="500">
            <el-table-column prop="m" label="日期" align="center">
            </el-table-column>
            <el-table-column prop="value" label="成长值" align="center">
            </el-table-column>
            <el-table-column prop="day" label="天数" align="center">
            </el-table-column>
            <el-table-column prop="capital" label="本金" align="center">
            </el-table-column>
            <el-table-column label="权益" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.value < 1000" > 未达标</span>

                <span v-if="(scope.row.value < 10000) && (scope.row.value < 1000 ? 0 : 2999 - 1999 % 10)"> {{ Math.trunc( (scope.row.value / 1000) ) * 80 }}邦豆</span>

                <span v-if="scope.row.value < 10000 ? 0 : 29999 - 19999 % 10">
                  {{ Math.trunc( (scope.row.value / 10000) ) * 433 }}邦豆 + {{ Math.trunc( (scope.row.value / 10000) )
                  * 4 }}
                  元消费卷
                </span>

              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px;display: flex;justify-content: center;">
            <button @click="record" class="record">
              记录
            </button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="计算汇总">
          <el-table :data="tableData" style="width: 950px" row-key="id" max-height="500"
            :tree-props="{children: 'children'}">
            <el-table-column prop="m" label="日期" align="center">
            </el-table-column>
            <el-table-column prop="value" label="成长值" align="center">
            </el-table-column>
            <el-table-column prop="day" label="天数" align="center">
            </el-table-column>
            <el-table-column prop="capital" label="本金" align="center">
            </el-table-column>
            <el-table-column label="当月权益" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.value < 1000" > 未达标</span>
                <span v-if="(scope.row.value < 10000) && (scope.row.value < 1000 ? 0 : 2999 - 1999 % 10)"> {{ Math.trunc( (scope.row.value / 1000) ) * 80 }}邦豆</span>
                <span v-if="scope.row.value < 10000 ? 0 : 29999 - 19999 % 10">
                  {{ Math.trunc( (scope.row.value / 10000) ) * 433 }}邦豆 + {{ Math.trunc( (scope.row.value / 10000) )
                  * 4 }}
                  元消费卷
                </span>

              </template>
            </el-table-column>
          </el-table>
          <div class="aggregate">
            <span>当月权益总计： </span>
            <span> {{ collect.num }} 成长值 = {{ collect.dou }} 邦豆 + {{ collect.juan }} 元消费卷</span>
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-collapse>
        <el-collapse-item title="更新日志" name="1">
          <div>1、修复计算精度</div>
          <div>2、修改权益计算方式：总成长值对应的权限等级</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
  <script src="js/vue.js"></script>
  <script src="js/index.js"></script>
  <script src="js/main66.js"></script>
</body>

</html>
